<template>
    <!-- 页面容器 -->
    <div class="header_information page-container">
      <!-- 头部区域，包含标题和装饰线条 -->
      <el-row class="header_name">
        <el-col :span="24" class="header_text">
          <h1>赛事报名管理</h1>
        </el-col>
        <el-col :span="24">
          <div class="header_line"></div>
        </el-col>
      </el-row>
  
      <!-- 按钮区域，包含已参与赛事的按钮和其他筛选工具 -->
      <el-row class="el_row_btn">
        <el-col :span="24" class="content">
          <div class="content_top_btn">
            <div>
              <el-button
                size="large"
                :icon="ScaleToOriginal"
                @click="handleOpenEventedModal"
                >已参与的赛事</el-button
              >
            </div>
            <div>
              <el-space>
                <GroupsSelect v-model="query_data.groupId" />
                <ModeSelect v-model="query_data.competitionType" />
                <ProvinceSelect
                  :isW="true"
                  v-model:economize="query_data.economize"
                  :showMarket="false"
                  :addChina="true"
                />
                <el-input
                  class="top_search_inp"
                  placeholder="搜素：比赛名称"
                  v-model="query_data.eventName"
                />
                <el-button
                  size="large"
                  :icon="Search"
                  circle
                  @click="() => handleLoad(true)"
                  :loading="loading"
                />
              </el-space>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 赛事内容展示区域 -->
      <el-row>
        <el-col :span="24" v-loading="loading">
          <div class="col_sp24">
            <el-card class="box_card" v-for="item in data" :key="item.eventId">
              <template #header>
                <div class="card_header">
                  <span class="card_text"
                    >{{ item.name }}({{ item.groupDescribe }}){{
                      item.economizeName ? "(" + item.economizeName + ")" : ""
                    }}报名入口</span
                  >
                </div>
              </template>
              <div class="text item">
                <div class="competition_content">
                  <div class="content">
                    <el-icon>
                      <Pointer />
                    </el-icon>
                    <span> 比赛组别： </span>
                  </div>
                  <span class="con_group">{{ item.groupDescribe }}</span>
                </div>
                <div class="competition_content">
                  <div class="content">
                    <el-icon>
                      <MagicStick />
                    </el-icon>
                    <span> 参赛方式： </span>
                  </div>
                  <span class="con_group" v-if="item.competitionType == 0"
                    >线下</span
                  >
                  <span class="con_group" v-else-if="item.competitionType == 1"
                    >线上</span
                  >
                  <span class="con_group" v-else-if="item.competitionType == 2"
                    >线上+线下</span
                  >
                </div>
                <div class="competition_content">
                  <div class="content">
                    <el-icon>
                      <Location />
                    </el-icon>
                    <span> 比赛区域：</span>
                  </div>
  
                  <span class="con_group">{{ item.economizeName }}</span>
                </div>
                <div class="competition_content">
                  <div class="content">
                    <el-icon>
                      <Tickets />
                    </el-icon>
                    <span> 赛事说明：</span>
                  </div>
                  <span class="con_group"
                    >{{ item.eventDescribe }}({{ item.groupDescribe }}){{
                      item.economizeName ? "(" + item.economizeName + ")" : ""
                    }}报名入口</span
                  >
                </div>
              </div>
              <div style="text-align: right">
                <el-button
                  type="primary"
                  size="large"
                  @click="handleToDetails(item)"
                  v-if="item.state == 1"
                  >立即报名</el-button
                >
                <el-button type="info" size="large" v-if="item.state == 2"
                  >报名已截止</el-button
                >
                <el-button type="info" size="large" v-if="item.state == 3"
                  >人数已满</el-button
                >
              </div>
            </el-card>
          </div>
        </el-col>
        <div class="nodata" v-if="total == 0">
          <el-empty></el-empty>
        </div>
      </el-row>
      <!-- 分页组件 -->
      <div class="pagination-container">
        <el-pagination
          background
          layout="prev, pager, next, total"
          :total="total"
          @current-change="handlePage"
        />
      </div>
      <!-- 已参与赛事的弹窗 -->
      <el-dialog v-model="evented.show" title="已参与赛项">
        <el-table
          :data="data2"
          empty-text="未查询到已参与赛项"
          v-loading="loading2"
        >
          <el-table-column prop="eventId" label="赛事编号" />
          <el-table-column prop="name" label="赛事名称" />
          <el-table-column prop="playingTime" label="比赛时间" width="120" />
          <el-table-column prop="district" label="比赛地点" />
          <el-table-column prop="participantsNumber" label="参赛人数" />
          <el-table-column prop="waitingListCount" label="待填写ID码人数" />
          <el-table-column prop="date" label="操作">
            <template #default="scope">
              <el-button @click="handleToDetails(scope.row)">报名详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            background
            layout="prev, pager, next, total"
            :total="total2"
            @current-change="handlePage2"
          />
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script  setup>
  // 导入Element Plus的图标，用于界面中的搜索和缩放操作
  import { Search, ScaleToOriginal } from "@element-plus/icons-vue";
  // 导入Vue的生命周期钩子onMounted和响应式数据引用ref
  import { onMounted, ref } from "vue";
  // 导入自定义的省份选择组件
  import ProvinceSelect from "@/components/province-select/index.vue";
  // 导入赛事管理相关的API接口
  import {
    GetEventsApi,
    GetAlreadyEventsListPageApi,
  } from "@/api/manage/competition";
  // 导入自定义的分页钩子usePage
  import { usePage } from "@/hooks/usePage";
  // 导入自定义的分组选择组件
  import GroupsSelect from "@/components/groups-select/index.vue";
  // 导入自定义的模式选择组件
  import ModeSelect from "@/components/mode-select/index.vue";
  // 导入Vue Router的路由钩子
  import { useRouter } from "vue-router";
  // 导入用户状态管理
  import { useUserStore } from "@/store/user";
  // 导入Element Plus的消息提示组件
  import { ElMessage } from "element-plus";
  
  // 使用用户状态管理
  const userStore = useUserStore();
  // 使用路由钩子
  const router = useRouter();
  
  // 使用分页钩子，并定义分页相关的响应式数据和方法
  const { total, data, loading, query_data, handleLoad, handlePage } = usePage({
    api_fn: GetEventsApi,
    q_data: {
      groupId: null,
      competitionType: 0,
      eventName: "",
      economize: "",
      market: "",
    },
  });
  
  /**
   * 已参与赛事的弹窗状态
   */
  const evented = ref({
    show: false,
  });
  /**
   * 打开已参赛项目弹窗的方法
   */
  const handleOpenEventedModal = () => {
    evented.value.show = true;
    handleLoad2(true);
  };
  /**
   * 前往赛项详情页的方法
   */
  const handleToDetails = (row) => {
    if (userStore.info_data.auditStatus != 1) {
      ElMessage.error("审核中或审核未通过，暂不支持使用功能");
      return;
    }
    // 导航到赛项详情页，并传递赛事ID作为参数
    router.push({
      name: "manage-registration-details",
      params: {
        eventId: row.eventId,
      },
    });
  };
  
  // ----------- 已报名的赛事 -----------
  // 定义已报名赛事的分页状态和方法
  const {
    total: total2,
    data: data2,
    loading: loading2,
    handleLoad: handleLoad2,
    handlePage: handlePage2,
  } = usePage({
    api_fn: GetAlreadyEventsListPageApi,
  });
  // 组件挂载时，加载赛事数据
  onMounted(() => {
    handleLoad(true);
  });
  </script>
  
  <style lang="scss" scoped>
  .header_information {
    padding: 20px;
    .header_name {
      margin-left: 10px;
      margin-right: 10px;
      .header_text {
        margin-left: -10px;
        margin-right: -10px;
      }
      h1 {
        font-size: 28px;
      }
      // 线
      .header_line {
        display: block;
        height: 1px;
        width: 100%;
        margin: 24px 0 20px 0;
        background-color: #8473f717;
      }
    }
    //   内容
    :deep(.el-card__header) {
      background: #dcdfe633;
      height: 50px;
      font-size: 16px;
      font-weight: 700;
      line-height: 50px;
      padding-left: 20px;
      padding-right: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 10px 10px 0 0;
    }
    .col_sp24 {
      flex-wrap: wrap;
      display: flex;
      min-height: 120px;
      .box_card {
        width: 450px;
        height: 280px;
        margin-bottom: 20px;
        margin-right: 20px;
        border: 1px solid #ebeef5;
        border-radius: 10px;
        .card_header {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
          width: 310px;
          height: 50px;
  
          .card_text {
            font-size: 16px;
            font-weight: 700;
            line-height: 0 !important;
          }
        }
      }
    }
    .text {
      height: 160px;
      .competition_content {
        display: flex;
        margin-bottom: 10px;
        .content {
          display: flex;
          align-items: center;
          color: #cf9236;
          span {
            font-size: 14px !important;
            margin-left: 3px;
          }
        }
        .con_group {
          color: #909399;
          font-size: 14px !important;
        }
      }
    }
  
    .el_row_btn {
      margin-bottom: 20px;
      .content {
        .content_top_btn {
          display: flex;
          justify-content: space-between;
          .top_search_inp {
            width: 150px;
            height: 40px;
            margin-right: 5px;
          }
          .top_search_btn {
            width: 110px;
            margin-right: 5px;
          }
          .top_search_btn1 {
            width: 90px;
            margin-right: 5px;
          }
        }
      }
    }
  }
  .pagination-container {
    display: flex;
    justify-content: center;
    padding: 32px 0;
  }
  .nodata {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  </style>